<template>
  <div>
    <el-container style="height: 500px">
      <el-aside width="200px" style="background-color: #fff">
        <el-menu default-active="0" class="el-menu-vertical-demo">
          <el-menu-item index="0" @click="handleSelect(0)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ menuList[0] }}</span>
          </el-menu-item>
          <el-menu-item index="1" @click="handleSelect(1)">
            <i class="el-icon-setting"></i>
            <span slot="title">{{ menuList[1] }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>{{menuList[activeIndex]}}</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: ["个人信息", "系统设置"],
      pathList: ["/userInfo", "/userInfo", "/userInfo"],
      activeIndex: 0,
    };
  },
  methods: {
    handleSelect(sel) {
      this.activeIndex = sel;
      switch (sel) {
        case 0:
          this.$router.push('/userInfo');
          break;
      }
    },
  },
  mounted() {
    this.handleSelect(0);
  },
};
</script>

<style>
</style>
